<template>
	
		<view class="main" :style="{
			paddingBottom:goodsNavHeight+'px'
		}">
		<u-icon class="go_list" name="arrow-left-double" color="#55ffff" size="48" @click="goList"></u-icon>
			<view class="container">
		
				<view class="shirt">
					<image class="firstImg" mode="widthFix" src="../../static/fitting/t_shirt.png" alt="" />
					<view class="shirt-overlay">
						<image id="fittingR" :style="{backgroundImage:`url(${goodsInfo.goods_thumb})`}" ref="mydom"
							class="shirt-overlay-pattern"></image>
						<!-- <view id="fittingR"   ref="mydom" class="shirt-overlay-pattern" ></view> -->
						<!-- <view id="fittingR" class="shirt-overlay-pattern" ></view> -->
						<image class="secondImg" mode="widthFix" src="../../static/fitting/t_shirt.png" alt="" />
					</view>
		
		
				</view>
		
			</view>
			<view class="goodsInfo">
				<view class="goods_item">
					<view class="goods_price">￥{{goodsInfo.base_price?goodsInfo.base_price:'面议'}}</view>
					<view class="goods_name">{{goodsInfo.name}}</view>
				</view>
			</view>
			<view ref="goods_nav" class="goods_nav" :style="{
				paddingBottom:$u.addUnit(safeAreaInsets.bottom)
			}">
				<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
					@buttonClick="buttonClick" />
			</view>
		</view>
		
	
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		name: "goods-detail",

		options: {
			styleIsolation: 'shared'
		},

		data() {
			return {
				category_id:'',
				goods_id:'',
				goodsDetail: {
					image: 'https://test.txjtapi.cn/uploads/goods_images/201/1.jpg'
				},
				isShowGoodsDetail: false,
				options: [{
					icon: 'headphones',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "#fff"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				],
				safeAreaInsets: null,
				goodsNavHeight:0
			};
		},
		onLoad(params){
			if (!this.hasLogin) {
				uni.showModal({
					title: "提示",
					content: '请登录后查看更多信息 ',
					showCancel:false,
					success(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							// 关闭所有页面，打开到应用内的某个页面
							uni.reLaunch({
								url: '/pages/my/my'
							})
						}
					}
				})
				return;
			}
			const {goods_id,category_id} = params;
			this.category_id = category_id;
			this.goods_id = goods_id;
			this.$store.dispatch('getGoodsInfo',goods_id);
			
		},
		created() {
			const {
				safeAreaInsets
			} = uni.getSystemInfoSync();
			this.safeAreaInsets = safeAreaInsets;
			console.log(this.$refs.goods_nav)
		},
		mounted() {
		this.getHeight();
		},
		methods: {
			// goList(){
			// 	const {scene} = uni.getLaunchOptionsSync();
			// 	const fag = scene!='1001';
			// 	console.log(scene,'scene')
			// 	console.log(fag,'path')
			// 	if(scene!='1001' && this.category_id){
			// 		console.log('分享进入');
			// 		uni.redirectTo({
			// 			url:`/pages/list/list?_id=${this.category_id}`
			// 		})
			// 	}else if(!this.category_id){
			// 		uni.switchTab({
			// 			url:`/pages/my/my`
			// 		})
			// 	}else{
			// 		uni.navigateBack();
			// 	}
				
			// },
			goList(){
				
				uni.navigateBack();
			},
			onClick(e) {
				// e.content.text
				uni.showToast({
					title: `商城功能暂未开放...`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				console.log(e)
				this.options[2].info++;
				uni.showToast({
					title: `商城功能暂未开放...`,
					icon: 'none'
				});
			},
			getHeight() {
			      const query = uni.createSelectorQuery().in(this);
			      query.select('.goods_nav').boundingClientRect(data => {
			        if (data) {
			          // data.height 就是元素的高度
			          console.log('元素高度:', data.height);
					  this.goodsNavHeight = data.height;
			        }
			      }).exec();
			    },
				// 转发
				onShareAppMessage(){
					return{
						title:this.goodsInfo.name,
						path:`/pages/goods-detail/goods-detail?goods_id=${this.goods_id}&category_id=${this.category_id}`,
						
					}
				},
				// 分享到朋友圈
				onShareTimeline(){
					return{
						title:this.goodsInfo.name,
						imageUrl:this.goodsInfo.goods_thumb
					}
				}
		},
		computed: {
		...mapState({
			goodsInfo:(state)=>state.goods.goodsInfo,
			hasLogin: (state) => state.user.hasLogin,
		}),

		}
	}
</script>

<style lang="scss" scoped>
	// ::v-deep .u-drawer  .u-drawer-top  {

	// 		background-color:transparent;

	// 	}
	// 	::v-deep .u-mask-show {
	// 		/* opacity: 0.5 !important; */
	// 		opacity: 0 !important;
	// }

	* {
		/* 初始化 */
		margin: 0;
		padding: 0;
	}

	.main {
		min-height: 100vh;
		background: transparent;
		position: relative;

	}
	.go_list{
		position: absolute;
		top: 100rpx;
		left: 50rpx;
		z-index: 999;
	}

	.container {
		/* 相对定位 */
		position: relative;
		height: 80vh;
	}

	/* T恤本体 */
	.shirt {
		position: relative;

		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.shirt .firstImg {

		// --widtdShirt:375rpx;
		width: 100%;

	}

	/* 覆盖层 */
	.shirt-overlay {
		/* 绝对定位 */
		position: absolute;
		width: 100%;
		height: 100%;

		//    top: 0;
		// left:0 ;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 0;
	}

	.shirt-overlay .secondImg {

		width: 100%;

		/* 设置混合模式为正片叠底 */
		mix-blend-mode: multiply;

	}

	/* 覆盖层图案 */
	.shirt-overlay-pattern {
		position: absolute;
		width: 100%;
		// height: 549.844px;
		// height: calc(1173rpx*750/800);
		height: calc(586rpx*750/400);
		// height: calc(146rpx*750/100);
		// top: 0;

		/* 设置元素上遮罩层的图像 */
		mask-box-image: url('https://env-00jxgsu6ddi5.normal.cloudstatic.cn/other_images/t_shirt_mask.png');
		-moz-mask-box-image: url('https://env-00jxgsu6ddi5.normal.cloudstatic.cn/other_images/t_shirt_mask.png');
		-ms-mask-box-image: url('https://env-00jxgsu6ddi5.normal.cloudstatic.cn/other_images/t_shirt_mask.png');
		-o-mask-box-image: url('https://env-00jxgsu6ddi5.normal.cloudstatic.cn/other_images/t_shirt_mask.png');
		-webkit-mask-box-image: url('https://env-00jxgsu6ddi5.normal.cloudstatic.cn/other_images/t_shirt_mask.png');
		/* 设置元素上遮罩层的图像 */
		// mask-box-image: url('../../static/fitting/t_shirt_mask.png');
		// -moz-mask-box-image: url('../../static/fitting/t_shirt_mask.png');
		// -ms-mask-box-image: url('../../static/fitting/t_shirt_mask.png');
		// -o-mask-box-image: url('../../static/fitting/t_shirt_mask.png');
		// -webkit-mask-box-image: url('../../static/fitting/t_shirt_mask.png');
		/* 掩码图像的大小 保持图像纵横比 */
		// mask-size: contain;
		mask-size: contain;
		-moz-mask-size: contain;
		-webkit-mask-size: contain;
		-ms-mask-size: contain;
		-o-mask-size: contain;
		// background-image: url('https://test.txjtapi.cn/uploads/fitting/1.png');
		// background-size:0.01%;
		background-size: 0.1%;
		display: block;
		vertical-align: top;

		// z-index: 9999;
	}

	.goodsInfo {
		// height: 500rpx;
		padding: 20rpx 20rpx;
		display: flex;
		background-color: #fff;

		.goods_item {
			display: flex;
			align-items: center;

			.goods_price {
				color: #fa436a;
				font-size: 38rpx;
				font-weight: bold;
				margin-right: 20rpx;
				
			}

			.goods_name {
				color: #909399;
				font-size: 38rpx;
				font-weight: bold;
			}
		}
	}

	.goods_nav {
		width: 100%;
		position: fixed;
		bottom: 0;
		background-color: #fff;
	}
</style>